<template>
  <div>
    <div id="Left1Chart" style="width:100%; height: 50%;"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data(){
    return{
      chart:null
    }
  },
  mixins:[echartMixins],
  methods(){
      this.draw()
  },
  methods:{
    // 图表绘制
    draw(){
      this.chart = this.$echarts.init(document.getElementById("Left1Chart"));
      option = {  
        legend: {},
        tooltip: {},
        dataset: {
            dimensions: ['product', '2015', '2016', '2017'],
            source: [
                {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
      };

      this.chart.setOption(option);
    },

    destroyed() {
      window.onresize = null;
    }
  }
  
}
</script>

<style lang="scss" scoped>

</style>